<template>
  <div class="panel-container">
    <div :class="{'selectpanel':v.select}" @click="handleSetLineChartData(v,i)" class="card-col" v-for="(v,i) in panellist" :key="i">
      <div class="img">
        <img :src="require('@/assets/img/'+v.img)" alt="" @mouseleave="changeimg(v,1)" @mouseenter="changeimg(v,2)">
      </div>
      <div class="panel-text">
        <span>{{v.name}}</span>
        <span>{{v.sum}}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // name:'panelgroup'
  props:['panellist'],
  methods: {
    handleSetLineChartData(item,index){
      item.select=!item.select
      console.log(this.panellist);
      let indexarr=[]
      this.panellist.forEach((v,i) => {
        if(v.select){
          indexarr.push(i)
        }
      });
      this.$emit('setLineChartData',indexarr)
    },
    changeimg(imgval,type){
      this.$set(imgval,'img',type==1?imgval.staimg:imgval.actimg)
    }
  },
}
</script>
<style lang="less" scoped>
  .panel-container {
    width: 100%;
    display: flex;
    .card-col {
      margin-right: 20px;
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100px;
      background: #fff;
      box-shadow: 0 0 10px rgb(51, 50, 50);
      cursor: pointer;
      &:last-child {
        margin-right: 0;
      }
      .img {
        flex: 0 1 80px;
        height: 80px;
        border: 1px solid red;
        margin-left: 20px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          transition: all .3;
          &:hover {
            transform: scale(1.5,1.5);
            // filter: grayscale(100%);
            filter: contrast(130%);
          }
        }
      }
      .panel-text {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 80px;
        padding-right: 20px;
      }
    }
    .selectpanel {
      background: green;
    }
  }
</style>
